<template>
  <div class="inputContent">
    <t-input class="width" v-if="props.type === SearchEnum.INPUT" v-model="value"
             :placeholder="props.placeholder || $t('common.pl.input')" clearable></t-input>
    <t-textarea class="width"  v-else-if="props.type === SearchEnum.TEXTAREA" v-model="value"
                :placeholder="props.placeholder || $t('common.pl.input')" clearable></t-textarea>
    <t-select class="width" v-else-if="props.type === SearchEnum.SELECT" v-model="value"
              :placeholder="props.placeholder || $t('common.pl.input')" clearable>
      <t-option v-for="(value, key) in radioOptions" :key="key" :value="key" :label="$t(value)"/>
    </t-select>
    <!-- <t-select v-else-if="props.type === 'dict'" v-model="value" :placeholder="props.placeholder || '请输入'">
        <t-option v-for="(item, index) in dictOptions" :key="item.dictValue" :value="item.dictValue"
            :label="$t(item.dictLabel)" />
    </t-select> -->
    <SelectDict class="width" v-else-if="props.type === SearchEnum.DICT"
                :dictType="dictType"
                v-model:value="value"
                :placeholder="props.placeholder || $t('common.pl.select')"
    />
    <!-- <t-radio-group v-else-if="props.type === 'radio'" v-model="value">
        <t-radio v-for="(value,key) in radioOptions" :key="key" :value="key">{{ value }}</t-radio>
    </t-radio-group> -->
    <t-date-range-picker class="width" v-model:value="value" v-if="props.type === SearchEnum.DATERANGE"
                         allow-input clearable/>
  </div>
</template>
<script setup lang="ts">
import {useVModels} from '@vueuse/core';
import {ComputedRef,ref} from 'vue';
import SelectDict from '@/components/dict/SelectDict.vue'
import {SearchEnum} from '../types';

const props = defineProps<{
  type: SearchEnum,
  value: any,
  placeholder?: string | ComputedRef<string> | any,
  radioOptions?: { [key: string]: string }
  dictType?: string,// 单选项字典
  itemWidth:string //每项的宽度
}>()

const emit = defineEmits<{
  (e: 'update:value', value: any): void
}>()

let {value} = useVModels(props, emit)



</script>
<style scoped lang="less">
.inputContent {
  width: 30%;
}

.width{
  width: v-bind("props.itemWidth")
}
</style>
